<template>
  <div class="cloud-computer-container">
    <!-- 云电脑服务器列表 -->
    <div class="servers-list">
      <!-- 服务器卡片1 -->
      <template v-for="(item, index) in serverStatus">
        <div class="server-card">
          <div class="server-content">
            <div class="game-image">
              <img :src="item.coverUrl" :alt="item.slogan" />
              <!-- <div class="game-badge">
                <div class="server-info">
                  <span class="server-region"> 华中一区 </span>
                  <span class="server-latency"> 40s </span>
                  <el-icon class="refresh-icon" @click="refreshServerStatus(0)">
                    <Refresh />
                  </el-icon>
                </div>
              </div> -->
            </div>
            <div class="game-info">
              <h3 class="game-title">{{ item.name }}</h3>
              <p class="game-description">{{ item.slogan }}</p>
            </div>
            <div class="server-actions">
              <el-button
                type="primary"
                class="enter-desktop-btn"
                @click="enterDesktop(item.id)"
              >
                <img
                  class="bbsize"
                  src="@/assets/images/computer-y.png"
                  alt=""
                />
                进入桌面
              </el-button>
            </div>
          </div>
        </div>
      </template>

      <!-- 服务器卡片3 -->
      <!-- <div class="server-card">
        <div class="server-content">
          <div class="game-image">
            <img src="https://picsum.photos/seed/game1/400/250" alt="绝地求生">
            <div class="game-badge">
              <div class="server-info">
                <span class="server-region">{{ serverStatus[2].region }}</span>
                <span class="server-latency">{{ serverStatus[2].latency }}</span>
                <el-icon class="refresh-icon" @click="refreshServerStatus(2)">
                </el-icon>
              </div>
            </div>
          </div>
          <div class="game-info">
            <h3 class="game-title">绝地求生</h3>
            <p class="game-description">海量游戏无需下载，即点即玩</p>
          </div>
          <div class="server-actions">
            <el-button type="primary" class="shutdown-btn" @click="shutdownServer(2)">
              <img class="bbsize" src="@/assets/images/shutdown.png" alt="">
              关机
            </el-button>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router"; // 添加 useRouter 导入
import { useUserStore } from "@/stores/user";
import dialogManager from "@/utils/dialogManager.js";
import Monitor from "@/assets/images/computer-y.png";
import { getComputerList, destroyConnectionSession } from "@/api/gaming.js";
import { useLoginCheck, handlePlayGame } from "@/utils/auth.js";

const route = useRoute();
const router = useRouter(); // 添加 router 实例
// 响应式数据
const serverStatus = ref([]);
// 引入登录检查模块
const { checkAndPerform } = useLoginCheck();
// 加载状态
const isPlaying = ref(false);
// 用户store
const userStore = useUserStore();

onMounted(() => {
  getComputer();
});

// 获取列表
const getComputer = () => {
  let params = {
    page: 1,
    rows: 10,
  };
  getComputerList(params).then((res) => {
    serverStatus.value = res.computers;
    console.log(res.computers);
  });
};

// 使用全局handlePlayGame方法
const handlePlayGameCallback = (status, data) => {
  switch (status) {
    case "cancel": //取消
      isPlaying.value = false;
      break;
    case "confirm": //确认
      isPlaying.value = false;
      // 传入目标类型:1=云游戏;2=云电脑
      handlePlayGame(gameDetail.value.id, "2", handlePlayGameCallback, 0);
      break;
  }
  // 其他状态可以在这里处理
};

// 进入云电脑
const enterDesktop = (id) => {
  isPlaying.value = true;
  // 使用全局handlePlayGame方法，传入目标id、目标类型(云电脑为'2')和账号使用方式
  // 1：使用官方共享账号
  handlePlayGame(id, "2", handlePlayGameCallback, 1);
};

// 关机
const shutdownServer = (index) => {
  console.log(`关闭服务器 ${serverStatus.value[index].region}`);
  // 实际项目中这里应该调用关机的API
};
</script>

<style lang="scss" scoped>
.cloud-computer-container {
  width: 100%;
  overflow: hidden;

  .servers-list {
    display: flex;
    gap: 21px;
    justify-content: flex-start;
    height: 100%;
    flex-wrap: wrap;
  }

  .server-card {
    width: 33%;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;

    .server-content {
      flex: 1;
      display: flex;
      flex-direction: column;

      .game-image {
        position: relative;
        width: 100%;
        height: 180px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;

          &:hover {
            transform: scale(1.05);
          }
        }

        .game-badge {
          position: absolute;
          top: 12px;
          left: 12px;
          width: 120px;
          height: 24px;
          line-height: 24px;
          background-color: rgba(0, 0, 0, 0.65);
          color: #ffffff;
          border-radius: 4px;

          .server-info {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;

            .server-region {
              color: #ffffff;
              font-weight: 500;
            }

            .server-latency {
              margin: 0 5px;
              color: #26ca75;
            }

            .refresh-icon {
              color: #949495;
              cursor: pointer;

              &:hover {
                color: #3c9cff;
              }
            }
          }
        }
      }

      .game-info {
        .game-title {
          color: #ffffff;
          font-size: 18px;
          font-weight: 600;
          margin: 20px 0 8px 0;
        }

        .game-description {
          color: #949495;
          font-size: 14px;
          margin-bottom: 12px;
        }
      }

      .server-actions {
        .enter-desktop-btn {
          width: 104px;
          background-color: #232527;
          color: #ffffff;
          font-size: 14px;
          font-weight: 500;
          padding: 10px;
          border: none;

          &:hover {
            background-color: #5aa6ff;
          }
        }

        .shutdown-btn {
          width: 76px;
          background-color: #232527;
          color: #ffffff;
          font-size: 14px;
          font-weight: 500;
          padding: 10px;
          border: none;

          &:hover {
            background-color: #ff7875;
            border-color: #ff7875;
          }
        }
      }
    }
  }
}
</style>
